<template>
  <transition name="slide-fade">
    <div class="sub-menu" v-show="modelValue" @mouseenter="$emit('update:modelValue', true)" @mouseleave="$emit('update:modelValue', false)">
      <div class="sub-menu-content">
        <div class="product-list">
          <div class="product-item" v-for="(item, index) in currentProducts" :key="index">
            <div class="product-img">
              <img :src="item.image" :alt="item.name">
            </div>
            <h3>{{ item.name }}</h3>
            <p>{{ item.price }}元起</p>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  currentIndex: {
    type: Number,
    default: 0
  }
});

// 模拟不同分类的产品数据
const productsData = {
  0: [ 
    { name: 'Xiaomi 15S Pro', price: '5499', image: '/src/assets/phone1.png' },
    { name: 'Xiaomi Civi 5 Pro', price: '2999', image: '/src/assets/phone1.png' },
    { name: 'Xiaomi 15 Ultra', price: '6499', image: '/src/assets/phone1.png' },
    { name: 'Xiaomi 15', price: '4099', image: '/src/assets/phone1.png' },
    { name: 'Xiaomi 15 Pro', price: '4999', image: '/src/assets/phone1.png' },
    { name: 'Xiaomi 15 定制版', price: '4599', image: '/src/assets/phone1.png' }
  ],
  1: [ 
    { name: 'Xiaomi 15S Pro', price: '5499', image: '/src/assets/redmi.png' },
    { name: 'Xiaomi Civi 5 Pro', price: '2999', image: '/src/assets/redmi.png' },
    { name: 'Xiaomi 15 Ultra', price: '6499', image: '/src/assets/redmi.png' },
    { name: 'Xiaomi 15', price: '4099', image: '/src/assets/redmi.png' },
    { name: 'Xiaomi 15 Pro', price: '4999', image: '/src/assets/redmi.png' },
    { name: 'Xiaomi 15 定制版', price: '4599', image: '/src/assets/redmi.png' }
  ],
  2: [ 
    { name: 'Xiaomi 15S Pro', price: '5499', image: '/src/assets/TV.png' },
    { name: 'Xiaomi Civi 5 Pro', price: '2999', image: '/src/assets/TV.png' },
    { name: 'Xiaomi 15 Ultra', price: '6499', image: '/src/assets/TV.png' },
    { name: 'Xiaomi 15', price: '4099', image: '/src/assets/TV.png' },
    { name: 'Xiaomi 15 Pro', price: '4999', image: '/src/assets/TV.png' },
    { name: 'Xiaomi 15 定制版', price: '4599', image: '/src/assets/TV.png' }
  ],
  3: [ 
    { name: 'Xiaomi 15S Pro', price: '5499', image: '/src/assets/computer.png' },
    { name: 'Xiaomi Civi 5 Pro', price: '2999', image: '/src/assets/computer.png' },
    { name: 'Xiaomi 15 Ultra', price: '6499', image: '/src/assets/computer.png' },
    { name: 'Xiaomi 15', price: '4099', image: '/src/assets/computer.png' },
    { name: 'Xiaomi 15 Pro', price: '4999', image: '/src/assets/computer.png' },
    { name: 'Xiaomi 15 定制版', price: '4599', image: '/src/assets/computer.png' }
  ],
  4: [ 
    { name: 'Xiaomi 15S Pro', price: '5499', image: '/src/assets/pad.png' },
    { name: 'Xiaomi Civi 5 Pro', price: '2999', image: '/src/assets/pad.png' },
    { name: 'Xiaomi 15 Ultra', price: '6499', image: '/src/assets/pad.png' },
    { name: 'Xiaomi 15', price: '4099', image: '/src/assets/pad.png' },
    { name: 'Xiaomi 15 Pro', price: '4999', image: '/src/assets/pad.png' },
    { name: 'Xiaomi 15 定制版', price: '4599', image: '/src/assets/pad.png' }
  ],
  5: [
    { name: 'Xiaomi 15S Pro', price: '5499', image: '/src/assets/appliances.png' },
    { name: 'Xiaomi Civi 5 Pro', price: '2999', image: '/src/assets/appliances.png' },
    { name: 'Xiaomi 15 Ultra', price: '6499', image: '/src/assets/appliances.png' },
    { name: 'Xiaomi 15', price: '4099', image: '/src/assets/appliances.png' },
    { name: 'Xiaomi 15 Pro', price: '4999', image: '/src/assets/appliances.png' },
    { name: 'Xiaomi 15 定制版', price: '4599', image: '/src/assets/appliances.png' }
  ],
  6: [
    { name: 'Xiaomi 15S Pro', price: '5499', image: '/src/assets/router.png' },
    { name: 'Xiaomi Civi 5 Pro', price: '2999', image: '/src/assets/router.png' },
    { name: 'Xiaomi 15 Ultra', price: '6499', image: '/src/assets/router.png' },
    { name: 'Xiaomi 15', price: '4099', image: '/src/assets/router.png' },
    { name: 'Xiaomi 15 Pro', price: '4999', image: '/src/assets/router.png' },
    { name: 'Xiaomi 15 定制版', price: '4599', image: '/src/assets/router.png' }
  ]
};

const currentProducts = computed(() => {
  return productsData[props.currentIndex] || [];
});

defineEmits(['update:modelValue']);
</script>

<style lang="scss" scoped>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s ease-in;
}

.slide-fade-enter-from {
  transform: translateY(-20px);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
  overflow: hidden;

  .sub-menu-content {
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    padding: 20px 0;
    
    .product-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 20px;
      
      .product-item {
        width: calc((100% - 100px) / 6);
        text-align: center;
        padding: 0 10px;
        position: relative;
        
        &:not(:last-child)::after {
          content: '';
          position: absolute;
          right: -10px;
          top: 20px;
          height: 100px;
          width: 1px;
          background-color: #e0e0e0;
        }
        
        .product-img {
          height: 110px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          img {
            max-width: 100%;
            max-height: 100%;
            transition: transform 0.3s ease;
          }
        }
        
        &:hover {
          img {
            transform: translateY(-2px);
          }
        }
        
        h3 {
          margin: 16px 0 2px;
          font-size: 12px;
          font-weight: normal;
          color: #333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        p {
          color: #ff6700;
          font-size: 12px;
        }
      }
    }
  }
}
</style> 